<template>
  <view class="goodsInfo_container" :class="addCartsStatus || ruleStatus ? 'noMovement' : ''">
    <view class="img">
      <swiper circular :current="currents" @change="topSwiperTab">
        <swiper-item v-for="(item, index) in data.goodsGalleryList" :key="index"
          @click="clickPreviewImage()">
          <image v-if="data.inform" :src="data.inform" class="swiper-img inform_announcement">
          </image>
          <image class="swiper-img" :src="item"
            :class="data.quantity ? '' : 'sellOut_container-img1'" />
        </swiper-item>
      </swiper>
      <view class="dots">
        <text
          v-if="data.goodsGalleryList">{{ currents + 1 }}/{{ data.goodsGalleryList.length }}</text>
      </view>
    </view>

    <view class="activityPriceImg">
      <estimated :estimated="estimated"></estimated>
      <view v-if="promotions && !estimated">
        <img class="imgs" :src="promotions[0].detailAppImage" />
        <view class="price_content" v-if="promotions">
          <view class="prices" v-if="hasToken() && promotions && data.price">
            <view>
              <text>￥</text>{{ data.promotionPrice }}
              <text>/{{ data.goodsUnit }}</text>
            </view>
            <view>
              <text>￥</text>
              {{ data.price }}
            </view>
          </view>

          <view class="prices" v-if="!hasToken()"> 登录可见 </view>
          <view class="prices" v-if="hasToken() && !data.price"> 资质审核通过可见 </view>

          <view class="countDown">
            <view>
              <img :src="staticUrl() + '/home/alarm.png'" alt="" />
              <text>距活动结束还剩:</text>
            </view>
            <text class="date">
              <text>{{ h }}</text> ： <text>{{ m }}</text> ：
              <text>{{ s }}</text>
            </text>
          </view>
        </view>
      </view>

      <!-- 优惠券 显示 按钮 -->
      <view class="couponBtn" v-if="couponList.length">
        <view class="coupon">
          <view v-for="(item, index) in couponList.slice(0, 3)" :key="index"
            class="singleRowEllipsis">
            <text v-if="item.couponType == 'DISCOUNT'">{{ calculate(item.couponDiscount) }}折</text>
            <text v-else>满{{ item.consumeThreshold }}减{{ item.price }}</text>
            <!-- <view class=""> -->
            <!-- 满{{ item.consumeThreshold }}减{{ item.price }} -->
            <!-- </view> -->
            <!-- 		<view v-if="item.couponType == 'DISCOUNT'" class="">
							满{{ item.consumeThreshold }}打{{ item.couponDiscount}}折
						</view> -->
          </view>
        </view>

        <view class="image" @click="closeCoupon()">
          <image :src="staticUrl() + '/home/clickGetCoupon.png'" mode="aspectFit"></image>
        </view>
      </view>

      <view class="goodsName">{{ data.goodsName }}</view>
      <!-- {{ extension.manufacturer }} -->
      <view v-if="data.price" style="margin-bottom: 20rpx">
        <text class="ephedrine" v-if="data.ephedrine">含麻</text>
        <text class="simpleSpecs">{{ data.simpleSpecs }}</text>
      </view>
      <view v-if="data.price" style="display: flex; justify-content: space-between">
        <view class="price" v-if="hasToken() && data.price && !promotions">
          <text>￥</text>
          <text>{{ data.price }}</text>
          <text>/{{ data.goodsUnit }}</text>
        </view>
        <view class="quantity">库存：<text>{{ data.quantity }}</text>
        </view>
      </view>
      <view class="price" v-if="!hasToken()">登录可见</view>
      <view class="price" v-if="hasToken() && !data.price">资质审核通过可见</view>
    </view>

    <view class="activityType" v-if="promotions">
      <text class="title">活动：</text>
      <text class="type">{{ promotions[0].title }}</text>
      <!-- <img :src="staticUrl()+'/home/more.png'" class="more" @click="ruleStatus=true"> -->
      <view class="item">
        <text v-for="(item, index) in promotions[0].rules" :key="index">{{ item.content }}</text>
      </view>
    </view>

    <view class="reminder">
      <view class="one">温馨提示：</view>
      <view>
        <view class="two">1、图片仅供参考。如本品同时存在新旧包装，则会随时发货。</view>
        <view class="two">2、药品为特殊商品，非质量问题不予退换！</view>
      </view>
    </view>

    <view class="info">
      <view style="display:flex">
        <view :class="infoName===item?'title':'default'" v-for="(item,index) in ['商品详情','售后保障']"
          :key="index">
          <text class="name" @click="clickInfoTitle(item)">{{item}}</text>
          <text class="after"></text>
        </view>
      </view>

      <view class="list" v-if="infoName==='商品详情'">
        <view class="item">
          <text class="key">商品名称</text> <text class="value">{{ data.goodsName }}</text>
        </view>
        <view class="item">
          <text class="key">有效期</text> <text class="value">{{ data.expirationDate }}</text>
        </view>
        <view class="item">
          <text class="key">商品编号</text> <text class="value">{{ data.identifier }}</text>
        </view>
        <view class="item">
          <text class="key">主治功能</text> <text class="value">{{ extension.indications }}</text>
        </view>
        <view class="item">
          <text class="key">整件数</text>
          <text class="value">{{ extension.crate }}{{ data.goodsUnit }}</text>
        </view>
        <view class="item">
          <text class="key">产品规格</text> <text class="value">{{ data.simpleSpecs }}</text>
        </view>
        <view class="item">
          <text class="key">批准文号</text> <text class="value">{{ extension.approvalNo }}</text>
        </view>
        <view class="item">
          <text class="key">生产厂家</text> <text class="value">{{ extension.manufacturer }}</text>
        </view>
        <view class="item">
          <text class="key">产地</text> <text class="value">{{ extension.place }}</text>
        </view>
        <view class="item"> <text class="key">医保类型</text> <text class="value"></text> </view>
        <view class="item">
          <text class="key">经营品类</text> <text class="value">{{ data.classification }}</text>
        </view>
      </view>
      <view v-else>
        <image
          src="https://www.xdyy100.com/wholesale/files/resources/images/after_sales_service_desc.png">
        </image>
      </view>
    </view>

    <!-- carts -->
    <view class="carts">
      <view class="text collection" @click="collection" v-if="!collectionStatus">
        <img :src="staticUrl() + '/home/collection.png'" alt="" />
        收藏
      </view>
      <view class="text collection" @click="collection" v-if="collectionStatus">
        <img :src="staticUrl() + '/home/collectioned.png'" alt="" />
        已收藏
      </view>
      <view class="text toCarts" @click="toCarts">
        <img :src="staticUrl() + '/home/carts.png'" alt="" class="car" />
        <text class="carNum" v-if="cartsNumber">{{ cartsNumber }}</text>
        购物车
      </view>
      <view class="addCarts" @click="
          addCartsStatus = true
          addCartsNum = data.pack
        ">
        加入购物车
      </view>
    </view>

    <!-- 加入购物车  添加数量 -->
    <view class="addCartsNum" v-if="addCartsStatus" @click.stop="addCartsStatus = false">
      <view class="content" @click.stop="">
        <view class="number">
          <text @click="reduce">-</text>
          <input type="number" v-model="addCartsNum" @blur="changeNum" />
          <text @click="add">+</text>
        </view>
        <view class="shopcar">
          <text @click="clickBar">确定</text>
        </view>
      </view>
    </view>

    <!-- 规则弹窗 -->
    <view class="ruleStyle" v-if="ruleStatus">
      <view class="rule">
        <view class="title">
          <text>活动规则</text>
          <img :src="staticUrl() + '/home/close.png'" @click="ruleStatus = false" />
        </view>
        <view class="rule_item">
          <view class="type">{{ promotions[0].title }}</view>
          <view class="item">
            <text v-for="(item, index) in promotions[0].rules"
              :key="index">{{ item.content }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 优惠券 弹窗 -->
    <view class="couponShowStatus" v-if="couponAvailable" @click.stop="closeCoupon()">
      <view class="data">
        <view class="title">
          <text>优惠券</text>
          <img :src="staticUrl() + '/home/close.png'" @click.stop="closeCoupon()" />
        </view>
        <view>
          <Coupon v-for="item in couponList" :key="item.id" :couponItem="item"
            @clickCoupon="clickCoupon"></Coupon>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import { getGoodsInfo, hasCollection, collection, cancelCollection, getCartNUm, addToCart } from '@/api/home/index'
import { getCoupons, getCouponList } from '@/api/personalCenter/index.js'
import { calculate } from '@/utils/util.js'
import Coupon from '@/components/coupon/coupon.vue'
import estimated from '@/components/estimated/index.vue'

export default {
  components: { Coupon, estimated },
  data () {
    return {
      currents: 0,
      id: '',
      data: '',
      extension: '',
      promotions: '',
      cartsNumber: 0,
      collectionStatus: false,
      addCartsStatus: false,
      addCartsNum: 0,
      ruleStatus: false,
      rules: '',
      h: 0,
      m: 0,
      s: 0,
      timeId: '',
      couponAvailable: false,
      couponList: [],
      estimated: '',
      infoName: '商品详情',
      previewImageDialog: false,
    }
  },
  onLoad (id) {
    this.id = id.id
    this.getList()
  },
  onUnload () {
    clearInterval(this.timeId)
  },
  methods: {
    clickPreviewImage () {
      uni.previewImage({ urls: this.data.goodsGalleryList, })
    },
    clickInfoTitle (item) {
      this.infoName = item
    },
    calculate,
    // 领取 优惠券
    clickCoupon (data) {
      let val = data.data
      if (val.couponLimitNum === val.obtainedNum) {
        uni.showToast({
          icon: 'none',
          title: '您已领取',
          mask: true
        })
        return
      }
      getCoupons(val.id).then(res => {
        if (res.code === 200) {
          getCouponList({
            pageNumber: 1,
            pageSize: 100
          }).then(res => {
            if (res.code === 200) {
              this.couponList = res.data.records

              uni.showToast({
                icon: 'none',
                title: '领取成功',
                mask: true
              })
            }
          })
        }
      })
    },
    // 领券 状态
    closeCoupon () {
      this.couponAvailable = !this.couponAvailable
    },
    // 加入购物车
    clickBar () {
      if (this.hasToken()) {
        addToCart({
          num: this.addCartsNum,
          skuId: this.id
        }).then(res => {
          if (res.code === 200) {
            getCartNUm().then(res => {
              if (res.code === 200) {
                uni.showToast({
                  icon: 'success',
                  title: '成功',
                  mask: true
                })
                this.cartsNumber = res.data
                this.addCartsStatus = false
              }
            })
          } else {
            this.addCartsStatus = false
          }
        })
      } else {
        uni.showToast({
          icon: 'success',
          title: '请登录',
          mask: true
        })
        this.addCartsStatus = false
      }
    },
    // 监听 数量input 变化
    changeNum () {
      this.addCartsNum % this.data.pack < this.data.pack
        ? (this.addCartsNum = parseInt(this.addCartsNum / this.data.pack) * this.data.pack)
        : ''
      this.addCartsNum > 0 ? '' : (this.addCartsNum = this.data.pack)
    },
    add () {
      this.addCartsNum += this.data.pack
    },
    reduce () {
      this.addCartsNum > this.data.pack ? (this.addCartsNum -= this.data.pack) : ''
    },
    // 收藏
    collection () {
      if (this.collectionStatus) {
        cancelCollection('GOODS', this.id).then(res => {
          if (res.code === 200) {
            this.collectionStatus = false
          }
        })
      } else {
        collection('GOODS', this.id).then(res => {
          if (res.code === 200) {
            this.collectionStatus = res.success
          }
        })
      }
    },
    // 跳购物车页面
    toCarts () {
      uni.switchTab({
        url: '/pages/shoppingCarts/index'
      })
    },
    // 轮播图 索引 标签
    topSwiperTab (e) {
      this.currents = Number(e.target.current)
    },
    // 获取数据
    getList () {
      getGoodsInfo(this.id).then(res => {
        if (res.code === 200) {
          this.data = res.data.data

          this.extension = res.data.extension
          this.promotions = res.data.promotions
          this.estimated = res.data.estimated

          // this.couponAvailable = res.data.couponAvailable
          // if (res.data.promotions) {
          //   let rules = []
          //   res.data.promotions[0].rules.forEach(i => {
          //     rules.push(i.content)
          //   })
          //   this.rules = rules.join(' | ')
          // }
          if (this.promotions) {
            this.countDown(res.data.promotions[0].endTime)
          }

          if (res.data.couponAvailable) {
            getCouponList({
              pageNumber: 1,
              pageSize: 100
            }).then(res => {
              if (res.code === 200) {
                this.couponList = res.data.records
                console.log(this.couponList)
              }
            })
          }
        }
      })
      hasCollection('GOODS', this.id).then(res => {
        if (res.code === 200) {
          this.collectionStatus = res.data
        }
      })
      getCartNUm().then(res => {
        if (res.code === 200) {
          this.cartsNumber = res.data
        }
      })
    },
    // 倒计时
    countDown (val) {
      this.timeId = setInterval(() => {
        let ts = val - parseInt(new Date().getTime() / 1000)
        this.h = parseInt((ts / 60 / 60) % 24)
        this.h = this.h < 10 ? '0' + this.h : this.h
        this.m = parseInt((ts / 60) % 60)
        this.m = this.m < 10 ? '0' + this.m : this.m
        this.s = parseInt(ts % 60)
        this.s = this.s < 10 ? '0' + this.s : this.s
        if (this.s === '0-1') {
          clearInterval(this.timeId)
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/goodsInfo/index?id=' + this.id
            })
          }, 500)
        }
      }, 1000)
    }
    // setTime(val) {
    // 	return val.split(' ')[0].replace(/-/g, '.')
    // },
    // startTime(val) {
    // 	let startTime = new Date(val)
    // 	return startTime.getFullYear() + '.' +
    // 		((startTime.getMonth() + 1) < 10 ? '0' + (startTime.getMonth() + 1) : (startTime.getMonth() + 1)) +
    // 		'.' + (startTime.getDate() < 10 ? '0' + startTime.getDate() : startTime.getDate())
    // },
    // endTime(val) {
    // 	let endTime = new Date(val)
    // 	return endTime.getFullYear() + '.' +
    // 		((endTime.getMonth() + 1) < 10 ? '0' + (endTime.getMonth() + 1) : (endTime.getMonth() + 1)) +
    // 		'.' + (endTime.getDate() < 10 ? '0' + endTime.getDate() : endTime.getDate())
    // },
  }
}
</script>

<style lang="scss" scoped>
.noMovement {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

.goodsInfo_container {
  background: #f5f5f5;

  .img {
    padding: 20rpx;
    position: relative;
    background: #fff;

    swiper {
      width: 100%;
      height: 520rpx;

      .swiper-img {
        width: 520rpx;
        height: 520rpx;
        margin: 0 15%;
      }
    }

    .dots {
      position: absolute;
      bottom: 2%;
      right: 5%;
      padding-right: 30rpx;

      text {
        background: rgba(0, 0, 0, 0.2);
        color: #fff;
        padding: 4rpx 16rpx;
        border-radius: 20rpx;
        font-size: 26rpx;
      }
    }
  }

  .couponBtn {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    background: #fff;
    padding: 36.81rpx 0 0 0;
    height: 60rpx;

    .coupon {
      display: flex;
    }

    .singleRowEllipsis {
      // padding: 6rpx 16rpx;
      max-width: 130rpx;
      height: 46rpx;
      line-height: 45rpx;
      background: #fde7e7;
      border-radius: 4rpx;
      font-size: 25rpx;
      font-weight: 400;
      color: #ef231b;
      text-align: center;
      margin-right: 17.36rpx;
      padding: 2rpx 16rpx;
    }

    .image {
      image {
        width: 108.33rpx;
        height: 45.83rpx;
      }
    }

    .singleRowEllipsis:nth-child(3) {
      max-width: 90rpx;
      padding: 2rpx 20rpx;
    }
  }

  .activityPriceImg {
    padding: 0 20rpx;
    padding-bottom: 10rpx;
    background: #fff;
    position: relative;

    .imgs {
      width: 100%;
      height: 88rpx;
      margin-bottom: 20rpx;
    }

    .goodsName {
      font-weight: bold;
      margin-bottom: 20rpx;
      margin-top: 22.22rpx;
    }

    .simpleSpecs,
    .quantity {
      font-size: 26rpx;
      opacity: 0.6;

      text {
        color: #2871fc;
      }
    }

    .price_content {
      width: 95%;
      height: 88rpx;
      position: absolute;
      top: 0;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;

      .prices {
        color: #fff;
        margin-top: 10rpx;
        display: flex;
        align-items: flex-end;
        margin-left: 26rpx;

        view {
          font-size: 48rpx;

          text {
            font-size: 30rpx;
            margin-left: 10rpx;
            margin-right: 2rpx;
          }
        }

        view:last-child {
          font-size: 30rpx;
          text-decoration: line-through;
          margin-left: 16rpx;

          text {
            font-size: 20rpx;
          }
        }
      }

      .countDown {
        color: #ed1b19;
        font-size: 20rpx;
        display: flex;
        flex-flow: column nowrap;
        margin-right: 50rpx;

        view {
          img {
            width: 26rpx;
            height: 26rpx;
            vertical-align: bottom;
            margin: 0;
            margin-right: 10rpx;
          }
        }

        .date {
          text {
            display: inline-block;
            background: #ed1b19;
            color: #fff;
            padding: 0 8rpx;
            margin-top: 6rpx;
            margin-right: 10rpx;
          }
        }
      }
    }

    .price {
      color: #ed1b19;
      margin-bottom: 20rpx;
      font-size: 30rpx;
      font-weight: bold;
    }

    ::v-deep.custom_box {
      width: 100%;
      height: 120rpx;
      position: relative;
      left: 0;
      bottom: 0;
      image {
        width: 100%;
        height: 120rpx;
      }
      .copywriting {
        width: 300rpx;
        font-size: 48rpx;
        position: absolute;
        left: 350rpx;
        bottom: 18rpx;
      }
      .custom_prices {
        font-size: 29rpx;
        left: 28rpx;
        bottom: 10rpx;
        .txt {
          font-size: 28rpx;
        }
        .price {
          font-size: 58rpx;
          margin-top: 4rpx;
          text {
            font-size: 30rpx;
          }
        }
      }
    }
  }
  .activityType {
    margin: 16rpx 0;
    padding: 26rpx 20rpx 10rpx;
    background: #fff;
    display: flex;

    .title {
      font-weight: bold;
      font-size: 30rpx;
    }

    .type {
      height: 35rpx;
      line-height: 34rpx;
      border: 1px solid #ed1b19;
      font-size: 22rpx;
      padding: 0 6rpx;
      color: #ed1b19;
      border-radius: 10rpx;
      margin-right: 30rpx;
    }

    .more {
      width: 48rpx;
      height: 10rpx;
      float: right;
      padding: 20rpx 16rpx;
    }

    .item {
      width: 60%;
      font-size: 22rpx;
      display: flex;
      flex-flow: column nowrap;

      text {
        margin-bottom: 10rpx;
      }
    }
  }

  .reminder {
    background: #fff;
    padding: 10rpx 20rpx;
    display: flex;
    margin-top: 16rpx;

    .one {
      font-weight: bold;
      font-size: 30rpx;
      margin-right: 8rpx;
      margin-top: 10rpx;
    }

    .two {
      font-size: 20rpx;
      opacity: 0.6;
      margin: 10rpx 0;
    }
  }

  .info {
    background: #fff;
    margin-top: 16rpx;
    padding: 20rpx 20rpx 150rpx;

    .default,
    .title {
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      font-size: 30rpx;
      margin-right: 60rpx;
      opacity: 0.6;
    }
    .title {
      font-weight: bold;
      color: #2871fc;
      opacity: 1;
      .after {
        display: block;
        width: 62rpx;
        height: 6rpx;
        background: linear-gradient(
          90deg,
          #2871fc 0%,
          rgba(40, 113, 252, 0) 100%
        );
        border-radius: 5rpx 5rpx 5rpx 5rpx;
        margin-top: 10rpx;
      }
    }
    .list {
      border: 1px solid #f5f5f5;
      border-radius: 10rpx;
      padding: 0 30rpx;
      margin-top: 20rpx;
      .item {
        margin: 36rpx 0;
        display: flex;

        .key {
          display: inline-block;
          opacity: 0.6;
          font-weight: normal;
          font-size: 28rpx;
          width: 30%;
        }

        .value {
          display: inline-block;
          font-weight: normal;
          font-size: 28rpx;
          width: 90%;
        }
      }
      .item:first-child {
        margin-top: 30rpx;
      }

      .item:last-child {
        margin-bottom: 30rpx;
      }
    }

    image {
      width: 100%;
      height: 4500rpx;
      margin-top: 30rpx;
    }
  }

  .carts {
    width: 100%;
    position: fixed;
    bottom: 0;
    background: #fff;
    height: 130rpx;
    font-size: 26rpx;
    display: flex;
    align-items: center;

    .text {
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      position: relative;
      width: 88rpx;

      img {
        width: 40rpx;
        height: 40rpx;
        margin: 8rpx 0;
      }

      .car {
        width: 46rpx;
        height: 38rpx;
      }

      .carNum {
        background: url("https://www.xdyy100.com/wholesale/files/mp/static/home/cartNum.png")
          no-repeat;
        background-size: 100% 100%;
        position: absolute;
        color: #fff;
        font-size: 20rpx;
        top: -16%;
        left: 60%;
        padding: 0 14rpx 2rpx;
      }
    }

    .collection {
      margin-left: 100rpx;
    }

    .toCarts {
      margin-left: 100rpx;
    }

    .addCarts {
      width: 220rpx;
      height: 70rpx;
      line-height: 70rpx;
      background: #2871fc;
      color: #fff;
      font-size: 28rpx;
      text-align: center;
      margin-left: 120rpx;
      border-radius: 100rpx;
    }
  }

  .addCartsNum {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 111;

    .content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      padding: 50rpx 60rpx;
      border-radius: 16rpx;

      .number {
        display: flex;

        text {
          display: inline-block;
          width: 50rpx;
          background: #fff;
          border: 1px solid #2871fc;
          border-radius: 10rpx;
          text-align: center;
        }

        input {
          display: inline-block;
          width: 200rpx;
          height: 50rpx;
          text-align: center;
          border: 1px solid #2871fc;
          border-radius: 10rpx;
          margin: 0 20rpx;
        }
      }

      .shopcar {
        text {
          display: inline-block;
          background: #2871fc;
          color: #fff;
          border-radius: 100rpx;
          text-align: center;
          margin-top: 44rpx;
          margin-left: 15%;
          width: 70%;
          font-size: 28rpx;
          padding: 6rpx 0;
        }
      }
    }
  }

  .ruleStyle {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;

    .rule {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 60%;
      background: #fff;
      z-index: 1000;
      border-top-left-radius: 10rpx;
      border-top-right-radius: 10rpx;

      .title {
        position: relative;

        text {
          display: inline-block;
          font-size: 32rpx;
          font-weight: bold;
          width: 100%;
          text-align: center;
          margin-top: 35rpx;
        }

        img {
          width: 20rpx;
          height: 20rpx;
          position: absolute;
          right: 50rpx;
          top: 50rpx;
        }
      }

      .rule_item {
        display: flex;
        margin-top: 50rpx;

        .type {
          display: inline-block;
          width: 13%;
          height: 38rpx;
          line-height: 38rpx;
          border: 1px solid #ed1b19;
          font-weight: normal;
          font-size: 22rpx;
          padding: 0 6rpx;
          color: #ed1b19;
          border-radius: 10rpx;
          margin-left: 50rpx;
          margin-right: 50rpx;
          text-align: center;
        }

        .item {
          width: 65%;
          font-size: 24rpx;
          opacity: 0.6;
          display: flex;
          flex-flow: column nowrap;

          text {
            margin-bottom: 8rpx;
          }
        }
      }
    }
  }

  .couponShowStatus {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);

    .data {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 1001;
      width: 100%;
      height: 1200rpx;
      background: #f9f9f9;
      border-radius: 22rpx 22rpx 0rpx 0rpx;
      overflow-y: auto;

      .title {
        height: 97rpx;
        line-height: 95rpx;
        font-size: 36rpx;
        background: #fff;
        font-weight: 500;
        text-align: center;
        border-radius: 22rpx 22rpx 0rpx 0rpx;
        position: sticky;
        top: 0;
        z-index: 10;

        img {
          position: absolute;
          top: 20rpx;
          right: 38rpx;
          width: 19.44rpx;
          height: 19.44rpx;
          padding: 20rpx;
        }
      }

      .item {
        height: 222.22rpx;
        background: #fff;
        margin: 0 25rpx;
        margin-bottom: 21.53rpx;
        display: flex;

        .left {
          background: url("https://www.xdyy100.com/wholesale/files/mp/static/personalCenter/coupon.png")
            no-repeat;
          background-size: 225.69rpx 222.22rpx;
          width: 225.69rpx;
          height: 222.22rpx;
          display: flex;
          flex-flow: column nowrap;
          justify-content: center;
          align-items: center;

          text {
            color: #fff;
          }

          .price {
            color: #fff;
            font-size: 56rpx;

            text {
              font-size: 40rpx;
            }
          }

          text:nth-child(2) {
            font-size: 28rpx;
            margin-top: 5rpx;
          }
        }

        .right {
          position: relative;
          display: flex;
          flex-flow: column nowrap;
          padding-left: 39.58rpx;
          width: calc(100% - 225.69rpx);

          text:nth-child(1) {
            font-size: 29rpx;
            font-weight: 500;
            margin: 40rpx 0 10rpx 0;
          }

          text:nth-child(2) {
            margin-bottom: 8rpx;
          }

          text:nth-child(2),
          text:nth-child(3) {
            font-size: 19rpx;
            color: #8d8d8d;
          }

          text:nth-child(4) {
            position: absolute;
            right: 20.17rpx;
            bottom: 20.17rpx;
            width: 129rpx;
            height: 43rpx;
            line-height: 42rpx;
            color: #fff;
            background: #2871fc;
            border-radius: 22rpx;
            font-size: 21rpx;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
